<template>
	<div class="payment_details">
		<div class="payment_details_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">待付款<i class="el-icon-close"></i></div>
		</div>
		<div class="payment_details_title">
			<div class="payment_details_title_left">待付款/<i>订单详情</i></div>
			<div class="payment_details_title_right">
				<button class="payment_details_title_right_btn" @click="handerBase">返回</button>
			</div>
		</div>
		<div class="payment_details_content">
			<!-- 进度条 -->
			<div class="payment_details_content_top">
				<div class="process">
					<div class="progress"><div class="progress_box"></div></div>
					<div class="process_num">
						<div class="process_num_box"><div class="round">1</div></div>
						<div class="process_num_title">
							买家下单
							<div v-if="orderInfoData.create_time" class="process_num_title_text">{{orderInfoData.create_time | dateformat('YYYY-MM-DD')}}<div>{{orderInfoData.create_time | dateformat('HH:mm:ss')}}</div></div>
						</div>
					</div>
					<div class="process_num">
						<div class="process_num_box"><div class="round round_active">2</div></div>
						<div class="process_num_title">
							买家付款
						</div>
					</div>
					<div class="process_num">
						<div class="process_num_box"><div class="round round_active">3</div></div>
						<div class="process_num_title">
							商家发货
						</div>
					</div>
					<div class="process_num">
						<div class="process_num_box"><div class="round round_active">4</div></div>
						<div class="process_num_title">
							订单完成
						</div>
					</div>
				</div>
			</div>
			<div class="payment_details_content_center">
				<div class="payment_details_content_center_left">
					<div class="top">
						<div class="payment_details_content_center_left_box">
							<div class="left">订单编号：</div>
							<div class="right">{{orderInfoData.order_code}}</div>
						</div>
						<div class="payment_details_content_center_left_box">
							<div class="left">付款方式：</div>
							<div class="right">{{orderInfoData.pay_type=='1'?'微信支付':orderInfoData.pay_type=='2'?'线下支付':''}}</div>
						</div>
						<div class="payment_details_content_center_left_box">
							<div class="left">买家：</div>
							<div class="right right_active">{{orderInfoData.name}}</div>
						</div>
						<div class="payment_details_content_center_left_box">
							<div class="left">配送方式：</div>
							<div class="right">{{orderInfoData.move_way=='1'?'快递':orderInfoData.move_way=='2'?'自提':''}}</div>
						</div>
						<div class="payment_details_content_center_left_box">
							<div class="left">收货人：</div>
							<div class="right" id="content">{{orderInfoData.province}} {{orderInfoData.city}} {{orderInfoData.area}} {{orderInfoData.address}} {{orderInfoData.name}} {{orderInfoData.mobile}}</div>
							<font class="copyConsignee" data-clipboard-target="#content" @click="copyConsignee">复制</font>
						</div>
					</div>
					<div class="botton">
						<div class="botton_btn" @click="_reviseOrderInfo">修改订单收货信息</div>
					</div>
					<el-dialog
						title="修改收货信息"
						:visible.sync="dialogVisible"
						width="30%"
						@open="openFn"
						@closed="closedFn"
						:before-close="handleClose">
						<div class="dialogBox">
							<el-select v-model="value1" @change="select1" placeholder="请选择省份">
								<el-option
								v-for="item in options1"
								:key="item.cityid"
								:label="item.city_name"
								:value="item.cityid">
								</el-option>
							</el-select>
							<el-select v-model="value2" @change="select2" placeholder="请选择城市">
								<el-option
								v-for="item in options2"
								:key="item.cityid"
								:label="item.city_name"
								:value="item.cityid">
								</el-option>
							</el-select>
							<el-select v-model="value3" @change="select3" placeholder="请选择县区">
								<el-option
								v-for="item in options3"
								:key="item.cityid"
								:label="item.city_name"
								:value="item.cityid">
								</el-option>
							</el-select>
							<el-input v-model="address" placeholder="请输入详细地址"></el-input>
							<el-input v-model="name" placeholder="请输入联系人姓名"></el-input>
							<el-input v-model="mobile" type="number" placeholder="请输入联系人电话"></el-input>
						</div>
						<span slot="footer" class="dialog-footer">
							<el-button @click="closeDialog">取 消</el-button>
							<el-button type="primary" @click="confirmFn">确 定</el-button>
						</span>
					</el-dialog>
				</div>
				<div class="payment_details_content_center_right">
					<div class="payment_details_content_center_right_top">
						订单状态：<font>待付款</font><i>（等待买家付款）</i>
					</div>
					<!-- <div class="payment_details_content_center_right_center">
						<button class="delivery">确认付款</button>
						<i>订单改价</i>
						<i>添加备注</i>
					</div> -->
				</div>
			</div>
			<h3 class="table_text">商品信息</h3>
			<div class="payment_details_content_bottom">
				<table>
					<tr>
						<th style="width: 20%;">商品标题</th>
						<th style="width: 19%;">规格、编号、条码</th>
						<th style="width: 11%;">单价</th>
						<th style="width: 11%;">数量</th>
						<th style="width: 13%;">原价</th>
						<th style="width: 13%;">折扣后</th>
						<th style="width: 13%;">状态</th>
					</tr>
					<tr v-for="(v,i) in orderInfoData.product_lst" :key="i">
						<td style="width: 20%;">
							<div class="tab_img">
								<img class="tab_img" style="border:0" :src="v.main_imgurl" alt="">
							</div>
							<div class="tab_right">
								<div class="tab_right_title">{{v.product_title}}</div>
								<!-- <div class="tab_right_invoice">支持开票</div> -->
							</div>
						</td>
						<td class="td_active" style="width: 19%;">
							<div class="tab_box">
								<div class="tab_box_content">
									规格：
									 <template v-if="v.attr_params && v.attr_params.length">
										 <p class="tab_spec" v-for="(item,index) in v.attr_params" :key="index">
											<i>{{item.value}}</i>
										</p>
									 </template>
									 <template v-else>无</template>
								</div>
								<div class="tab_box_content">编码：{{v.specss?v.specss:' 无'}}</div>
								<div class="tab_box_content">条码：{{v.specsss?v.specsss:' 无'}}</div>
							</div>
						</td>
						<td style="width: 11%;">￥{{v.price}}</td>
						<td style="width: 11%;">{{v.num}}个</td>
						<td style="width: 13%;">￥{{v.primary_price}}</td>
						<td style="width: 13%;">￥{{v.price}}</td>
						<td style="width: 13%;">{{v.order_status=='1'?'待付款':v.order_status=='2'?'待发货':v.order_status=='3'?'待收货':v.order_status=='4'?'已完成':'已关闭'}}</td>
					</tr>
				</table>
				<div class="price">
					<div class="price_box">
						<div class="price_box_left">商品小计：</div>
						<div class="price_box_right">￥{{orderInfoData.price}}</div>
					</div>
					<div class="price_box">
						<span class="price_box_left">运费：</span>
						<span class="price_box_right">￥{{orderInfoData.move_price}}</span>
					</div>
          <div class="price_box">
            <div class="box-left">
              <span class="price_box_left price_active">总价：</span>
              <span class="price_box_right price_active">￥{{orderInfoData.price}}</span>
            </div>
            <div class="box-right">
              <span class="price_box_left price_active">定金：</span>
              <span class="price_box_right price_active">￥{{orderInfoData.deposit_price}}</span>
            </div>
          </div>
				</div>
			</div>
		</div>
	</div>
</template>
	
<script>
import ClipboardJS from "clipboard";

export default {
  data() {
    return {
      total: 0.0, // 实付款
      freight: 0.0, // 运费
      subtotal: 0.0, // 小计
      changePrice: 0.0, // 卖家改价
    //   completedList: [],
      orderInfoData: [],
	  dialogVisible:false,
	  options1:[],//省份
	  options2:[],//城市
	  options3:[],//县区
	  value1:'',
	  value2:'',
	  value3:'',
	  address:'',//详细地址
	  name:'',//姓名
	  mobile:'',//手机号
    };
  },
  mounted() {
    this._getOrderInfo();
	this.getProvince()
  },
  methods: {
    //获取传过来的order_id，获取商品详情
    _getOrderInfo() {
      console.log(this.$route, "order_id");
      let order_id = this.$route.query.order_id;
    //   let store_id = localStorage.getItem("sid");
      this.$http
        .post("/api/root/PackOrder/detail", { order_id })
        .then(res => {
          console.log(res, 123456);
          if (res.code == 1) {
            this.orderInfoData = res.data ? res.data : [];
          }else{
			this.$message.warning(res.msg)
		}
        });
    },

	// 省份选择
	select1(){
		this.getCityList()
	},
	// 城市选择
	select2(){
		if(!this.value1){
			this.$message.warning('请先选择省份')
			return
		}
		
		this.getAreaList()
		console.log(this.value2);
	},
	// 县区选择
	select3(){
		if(!this.value2){
			this.$message.warning('请先选择城市')
			return
		}
	},
	
	// 获取省份
	getProvince(){
		this.$http.post('/api/root/Region/getProvinceList').then(res=>{
			console.log(res,'省份');
			if(res.code==1){
				this.options1 = res.data?res.data:[]
			}
		})
	},
	// 获取城市
	getCityList(){
		this.$http.post('/api/root/Region/getCityList',{province_id:this.value1}).then(res=>{
			console.log(res,'城市列表');
			if(res.code==1){
				this.options2 = res.data?res.data:[]
			}
		})
	},
	// 获取县区
	getAreaList(){
		this.$http.post('/api/root/Region/getDistrictList',{city_id:this.value2}).then(res=>{
			console.log(res,'县区列表');
			if(res.code==1){
				this.options3 = res.data?res.data:[]
			}
		})
	},
    //修改订单信息
    _reviseOrderInfo() {
		this.dialogVisible = true
    },
	// 对话框取消按钮
	closeDialog(){
		this.dialogVisible = false
	},
	// 关闭对话框后
	closedFn(){
		this.options2=[]
		this.options3=[]
		this.name=''
		this.mobile=''
		this.address=''
		this.value1=''
		this.value2=''
		this.value3=''
	},
	// 对话框确定按钮
	confirmFn(){
		if(this.value1==''){
			this.$message.warning('请选择省份')
			return
		}
		if(this.value2==''){
			this.$message.warning('请选择城市')
			return
		}
		if(this.value3==''){
			this.$message.warning('请选择县区')
			return
		}
		if(this.name==''){
			this.$message.warning('请输入联系人')
			return
		}
		if(this.mobile==''){
			this.$message.warning('请联系电话')
			return
		}
		if(this.address==''){
			this.$message.warning('请输入详细地址')
			return
		}
		let province = ''
		this.options1.map(item=>{
			if(item.cityid==this.value1){
				province = item.city_name
			}
		})
		let city = ''
		this.options2.map(item=>{
			if(item.cityid==this.value2){
				city = item.city_name
			}
		})
		let area = ''
		this.options3.map(item=>{
			if(item.cityid==this.value3){
				area = item.city_name
			}
		})
		let params = {
			order_id:this.$route.query.order_id,
			name:this.name,
			mobile:this.mobile,
			province,
			city,
			area,
			address:this.address
		}
		this.$http.post('/api/root/packOrder/editAdress',params).then(res=>{
			console.log(res,'修改信息结果');
			if(res.code==1){
				this.$message.success('修改成功')
				this._getOrderInfo()
				this.options2=[]
				this.options3=[]
				this.name=''
				this.mobile=''
				this.address=''
				this.value1=''
				this.value2=''
				this.value3=''
				this.dialogVisible = false
			}
		})
	},
	openFn(){
		this.options2=[]
		this.options3=[]
		this.value1=''
		this.value2=''
		this.value3=''
		this.name = this.orderInfoData.name
		this.address = this.orderInfoData.address
		this.mobile = this.orderInfoData.mobile
	},
	// 关闭对话框
	handleClose(){
		this.dialogVisible = false
	},


    handerBase() {
      this.$router.go(-1);
    },
    // 实现复制功能
    copyConsignee() {
      // 括号中的内容：对应复制按钮的class
      let clipboard = new ClipboardJS(".copyConsignee");
      clipboard.on("success", function(e) {
        console.log("复制成功");
        e.clearSelection();
      });
      clipboard.on("error", function(e) {
        console.log("复制失败，请重试");
        console.log(e);
      });
    },
//   computed: {
//     // 商品小计
//     subtotalPrice() {
//       this.completedList.filter(v => {
//         this.subtotal += v.price;
//       });
//       return `${this.subtotal}.00`;
//     },
//     // 运费
//     freightPrice() {
//       this.completedList.filter(v => {
//         this.freight += v.freight;
//       });
//       return `${this.freight}.00`;
//     },
//     // 卖家改价
//     changePrices() {
//       for (let i = 0; i < this.completedList.length; i++) {
//         this.changePrice +=
//           this.completedList[i].prices - this.completedList[i].pricess;
//       }
//       return `${this.changePrice}.00`;
//     },

//     // 实付款
//     totalPrice() {
//       this.completedList.filter(v => {
//         this.total += v.pricess;
//       });
//       return `${this.total}.00`;
//     }
//   }
  },
};
</script>

<style lang="less" scoped="scoped">
@import "details.less";
</style>
